<template>
    <view class="Integral">
        <u-navbar
            title="我的积分"
            back-icon-color="#ffffff"
            title-color="#ffffff"
            :background="background"
        ></u-navbar>
        <view class="my_integral">
            <view class="integralBox">
                <image :src="BaseUrl + '/static/common/jfen.png'" mode="scaleToFill" />
                <view class="integral_num">{{ score }}</view>
            </view>
        </view>
        <view class="card">
            <u-tabs
                ref="uTabs"
                :list="list"
                :current="current"
                active-color="#057748"
                @change="tabsChange"
                :is-scroll="false"
            ></u-tabs>
            <swiper :current="current" @change="changeSwiper">
                <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
                    <scroll-view scroll-y style="width: 100%" @scrolltolower="onreachBottom">
                        <view class="item" v-for="(item, index) in integralList" :key="index">
                            <view class="box">
                                <view class="tit">
                                    {{ item.memo }}
                                </view>
                                <!-- <view class="payment"> 实付：{{ item.payment }} </view> -->
                                <view class="date">{{ initDate(item.createtime) }}</view>
                            </view>
                            <view>
                                {{ item.score }}
                            </view>
                        </view>
                        <u-empty
                            text="暂无数据"
                            v-if="integralList.length == 0"
                            mode="list"
                        ></u-empty>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
import { getMyRecord } from "@/utils/newLive.js";
export default {
    data() {
        return {
            BaseUrl: BaseUrl,
            background: {
                backgroundColor: "#029669",
            },
            info: {},
            current: 0,
            list: [
                {
                    id: 1,
                    name: "获得",
                },
                {
                    id: 2,
                    name: "使用",
                },
            ],
            integralList: [],
            score: uni.getStorageSync("score"),
        };
    },
    onShow() {
        this.info = uni.getStorageSync("userInfo");
        if (this.current == 0) {
            this.getScore(1);
        } else {
            this.getScore(2);
        }
    },

    methods: {
        initDate(date) {
            // 将时间戳转换为年 月 日 时 分 秒
            var date = new Date(date * 1000);
            var Y = date.getFullYear() + "-";
            var M =
                (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) +
                "-";
            var D = date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
            var h = date.getHours() < 10 ? "0" + date.getHours() + ":" : date.getHours() + ":";
            var m =
                date.getMinutes() < 10 ? "0" + date.getMinutes() + ":" : date.getMinutes() + ":";
            var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            return Y + M + D + h + m + s;
        },
        tabsChange(index) {
            this.current = index;
            if (this.current == 0) {
                this.getScore(1);
            } else {
                this.getScore(2);
            }
        },
        changeSwiper(e) {
            this.current = e.detail.current;
            if (this.current == 0) {
                this.getScore(1);
            } else {
                this.getScore(2);
            }
        },
        async getScore(type) {
            const data = await getMyRecord({ type: type });
            if (data.code == 1) {
                this.integralList = data.data.data;
            }
        },
    },
};
</script>
<style lang="scss" scoped>
swiper {
    height: calc(100vh - 260rpx);
    padding: 0 10rpx;
}
.swiper-item {
    overflow: auto;
}
.Integral {
    background: #029669;
    height: 100vh;
}
.my_integral {
    width: 100%;
    height: 260rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .integralBox {
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
            width: 80rpx;
            height: 80rpx;
        }
        .integral_num {
            color: #fff;
            font-size: 60rpx;
            font-weight: bold;
            line-height: 1.6em;
        }
    }
}
.card {
    width: 100%;
    background: #fff;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    padding: 0 30rpx;
    .item {
        padding: 20rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        .payment {
            line-height: 1.8em;
        }
    }
    .item:last-child {
        border-bottom: none;
    }
}
.date {
    margin-top: 10rpx;
}
.add_integral {
    color: #eb5c20;
}
.reduce_integral {
    color: #5a5a5a;
}
/deep/.u-border-bottom:after {
    border-bottom-width: 0px !important;
}
</style>
